<template>
    <div id="History">
        <Input />
        <div class="kong">
            <div class="kong-history">亲们都在找</div>
        </div>
        <div class="mark">
            <div class="mark-content">
                <div v-for="(item,index) in arr" v-bind:key="index" >
                    <div class="mark-conten">
                    <div class="mark-cont">{{item.text}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="record">
                最近搜索
            </div>
            <ul :class="{'no':falg}" v-for="(i,index) in array" v-bind:key="index">
                <li class="txt">{{i.text}}</li>
            </ul>
            <div class="empty" @click="change()">
                清空历史记录
            </div>
        </div>
    </div>
</template>
<script>
import Input from './Input';
export default {
    name:"History",
    data() {
        return {
            falg:false,
            arr:[
                {
                    text:'面膜',
                },
                {
                    text:'防晒',
                },
                {
                    text:'眼霜',
                },
                {
                    text:'精华',
                },
                {
                    text:'洗面奶',
                },
                {
                    text:'资生堂',
                },
                {
                    text:'洗发水',
                },
                {
                    text:'防晒喷雾',
                },
                {
                    text:'洗面奶',
                },
                {
                    text:'资生堂',
                },
                {
                    text:'洗发水',
                },
                {
                    text:'防晒喷雾',
                },
            ],
            array:[
                {
                    text:'睫毛膏',
                },
                {
                    text:'面膜',
                },
                {
                    text:'口红',
                },
                {
                    text:'卸妆水',
                },
            ]
        }
    },
    methods: {
            goBack() {
            window.history.back()
        },
        change(){
            this.falg = true
        }
    },
    components:{
    Input,
  },
}
</script>
<style scoped>

.kong{
    width: 100%;
    height: 0.8rem;
    /* line-height: 0.8rem; */
    background-color: #f2f2f2;
    padding-top:  1rem;
}
.kong-history{
    width: 1.45rem;
    height: 0.3rem;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
    font-size: 0.28rem;
    color: #808080;
}
.mark{
    width: 100%;
    height: 4rem;
    background-color: #fff;
}
.mark-content{
    width: 6.1rem;
    height: 4rem;
    display: flex;
    justify-content:space-evenly ;
    flex-wrap: wrap;
    align-content: flex-start;
    
}
.mark-conten{
    width: 1.4rem;
    height: 0.4rem;
}
.mark-cont{
    min-width: 1.2rem;
    height: 0.4rem;
    border: solid 0.01rem #ccc;
    color: #4d4d4d;
    font-size: 0.28rem;
    margin-top: 0.2rem;
    border-radius: 0.2rem;
    text-align: center;
}
.record{
    width: 100%-0.2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    background-color: #f2f2f2;
    font-size: 0.28rem;
    color: #808080;
    padding-left: 0.2rem;
}
.txt{
    width: 100%-0.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    border-bottom: 1px solid #ccc;
    color: #808080;
    font-size: 0.28rem;
    padding-left: 0.2rem;
}
.empty{
    width: 5rem;
    height: 0.4rem;
    margin: 0.33rem auto;
    line-height: 0.4rem;
    text-align: center;
    border: solid 0.01rem #ccc;
    border-radius: 0.2rem;
    font-size: 0.24rem;
    color: #959595;
}
.no{
    display: none;
}
</style>